<template>
  <!-- 搜索结果页-头部导航 -->
  <div class="search-result-container">
    <!-- 点击实现后退效果 -->
    <van-nav-bar
      title="搜索结果"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <div class="search-result-list">
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          offset="30"
        >
          <article-item
            v-for="obj in resultList"
            :key="obj.art_id"
            :obj="obj"
            :isShow="false"
          />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getSearchResultListApi } from "@/api/search";
export default {
  name: "SearchResult",
  data() {
    return {
      page: 1,
      resultList: [],
      loading: false,
      finished: false,
      isLoading: false,
    };
  },
  activated() {
    console.log("1");
    this.getSearchResultList();
  },
  deactivated() {
    this.resultList = [];
    this.page = 1;
    this.loading = false;
    this.finished = false;
    this.isLoading = false;
  },
  methods: {
    // 搜索结果列表
    async getSearchResultList(Pullup) {
      const resp = await getSearchResultListApi(
        this.$route.params.name,
        this.page,
        10
      );
      if (!resp.data.results.length) return (this.finished = true);
      this.resultList = Pullup
        ? [...this.resultList, ...resp.data.results]
        : [...resp.data.results, ...this.resultList];
      this.loading = false;
      this.isLoading = false;
    },
    // 上拉刷新
    onLoad() {
      this.page++;
      this.getSearchResultList(true);
    },
    onRefresh() {
      this.page++;
      this.getSearchResultList(false);
    },
  },
};
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>